<template>
	<view>
		<!-- 背景圖 -->
		<image class="backImage" src="https://app.yycjkb.cn/index/fujiajia/backImage.png" mode="widthFix"></image>
		<view class="container">
			<!-- 頁面頂部 -->
			<view class="top-section">
				<!-- 城市選擇 -->
				<view class="top-title">
					<view class="city-selector" @click="onSelectCity">
						<view class="page-title">

						</view>
						<image class="arrow-icon" src="/static/user/location.png"></image>
						<text class="city-name">{{cityname}}</text>
						<image class="arrow-icon1" src="/static/user/arrow_down.png"></image>
					</view>
				</view>

				<!-- 搜索框 -->
				<view class="search-index">
					<view class="search-center">
						<image class="search-icon" src="https://app.yycjkb.cn/index/fujiajia/search.png" mode="">
						</image>
						<input type="text" model="searchtext" @tap="goSearch()" class="search-input"
							placeholder="搜索商家" />
						<view class="search-btn">
							搜索
						</view>
					</view>
				</view>
			</view>

			<!-- tab選擇 -->
			<view class="tab-content">
				<view v-for="(tab, index) in cateory" :key="index" class="tab-item"
					:class="{ 'active-tab': selectedTab === index }" @click="selectTab(index)">
					{{ tab.title }}
				</view>
			</view>

			<!-- grid分類 -->
			<view class="grid-container">
				<view class="grid-item" @tap="goMenu(item.id)" v-for="item in cateory[selectedTab].child">
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="grid-text">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 本地生活 -->
			<view class="original-content">
				<view class="life-container">
					<view class="life-grid-container">
						<view class="life-header">
							<view class="life-title titleCommon">
								<view class="title-name">
									惠生活
								</view>
								<view class="splite"> | </view>
								<view class="title-data">
									消费赠送<text>奉献值</text>
								</view>
							</view>

							<view class="order-user">
								<!-- <text>u3080219</text>剛剛下單了 -->
								<!-- 滚动容器 -->
								<view class="scroll-box">
									<view class="scroll-container">
										<view class="scroll-wrapper">
											<!-- 原始内容 -->
											<view class="scroll-item" v-for="(item, index) in textList"
												:key="'original-' + index">
												{{ item }}
											</view>
											<!-- 复制内容，用于无缝滚动 -->
											<view class="scroll-item" v-for="(item, index) in textList"
												:key="'copy-' + index">
												{{ item }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="free-sections">
					<view class="btn-containers">
						<view class="recharge-btns" v-for="(item,index) in taokeList" v-if="item.is_tj == 1"
							:key="item.id" @tap="gotoLink(item.jtk_id)">
							<view style="display: flex;flex-direction: column;align-items: center;position: relative;">
								<img class="gif-img" :src="item.thumb" alt="">
								<text style="margin-top: 20rpx;font-size: 14rpx;">
									{{item.title}}
								</text>
								<view v-if="item.tags"
									style="position: absolute;top: 0;right: 0;background-color: red;font-size: 24rpx;color: #fff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;border-bottom-right-radius: 20rpx;padding: 5rpx 10rpx;">
									{{item.tags}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="free-section">
					<view class="btn-container">
						<view class="recharge-btn" @tap="gotoLink(1)">
							<image class="gif-img" src="/static/mt.gif" mode="aspectFill" />
						</view>
						<view class="recharge-btn" @tap="gotoLink(4)">
							<image class="gif-img" src="/static/elm.gif" mode="aspectFill" />
						</view>
					</view>
				</view>
				<view class="new-parent-container">
					<view class="life-grid-item" v-for="(item, index) in taokeList" :key="index" v-if="index<6"
						@tap="goNav(item)">
						<view style="display: flex;flex-direction: column;align-items: center;">
							<img :src="item.thumb" alt="" style="width: 100rpx;height: 100rpx;border-radius: 20rpx;">
							<view style="font-size: 28rpx;font-weight: 600;margin-top: 10rpx;color: #1a1a1a;">
								{{item.title}}
							</view>
							<view style="font-size: 24rpx;color: #7a7a7a;margin-top: 10rpx;">
								{{item.tags}}
							</view>
							<view
								style="background: #ffe7c1;color: #681b01;margin-top: 20rpx;padding: 10rpx 60rpx;border-radius: 30rpx;font-weight: bold;">
								{{item.button}}
							</view>
						</view>
						<!-- 	 <view class="image-wrapper">
				 	<image class="grid-image" :src="getImagePath(index)" mode="aspectFit"></image>
				 </view>
				   <view class="button-container">
				         <view class="custom-button">{{item.title}}</view>
					</view> -->
					</view>
				</view>
			</view>


			<!-- 附近商家 -->
			<view class="nearby-businesses">
				<view class="businesses-title titleCommon">
					<view class="title-name">
						附近商家
					</view>
					<view class="splite"> | </view>
					<view class="title-data">
						最高可省<text>100%</text>
					</view>
				</view>

				<view class="businesses-item" v-for="(store, index) in shops">
					<image class="item-left-image" :src="store.logo" mode="" @tap="toShop(store.id)"></image>
					<view class="item-center-text" @tap="toShop(store.id)">
						<view class="">
							<view class="item-title">
								{{ store.short_name }}
							</view>
							<view class="item-phone">
								<image src="https://app.yycjkb.cn/index/fujiajia/phone.png" mode=""></image>
								{{ store.tel }}
							</view>
						</view>
						<view class="item-buy">
							<view class="money-box">
								<image src="https://app.yycjkb.cn/index/fujiajia/discount.png" mode=""></image>
							</view>
							<view class="money-data">
								让利{{store.discount}}%
							</view>
						</view>
					</view>
					<view class="item-right-icon">
						<image class="icon-red" src="/static/GIF.gif" mode="aspectFill"
							style="width: 65rpx; height: 65rpx;">
						</image>
						<view class="address">
							<image class="icon-address" src="https://app.yycjkb.cn/index/fujiajia/定位.png"
								mode="aspectFill">
							</image>
							{{store.distance}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="userInfo.id>0 && money>0">
			<gcm-red-bag :money="money" :options="redBagConfig" @onConfirm="onConfirm" @onClose="onClose"
				@onCover="onCover"></gcm-red-bag>
		</template>
		<!-- 底部tabbar -->
		<CustomTabbar :currentIndex="0" />
		<AgreementPopup :show="showAgreement" @agree="handleAgree" @reject="handleReject" />
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import CustomTabbar from '@/newsPage/components/tabBar/index.vue'
	import api from "@/api/";
	import user from "@/api/user";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import MyHomeHeader from "@/components/MyHomeHeader";
	import MyHomeSlide from "@/components/MyHomeSlide";
	import MyHomeMenus from "@/components/MyHomeMenus";
	import MyTaokeMenus from "@/components/MyTaokeMenus";
	import AgreementPopup from '@/components/custom-alert.vue';
	import MyShops from "@/components/MyShops";
	import location from '@/common/location.js'
	// import TaokeList from "@/components/TaokeList";
	import {
		Base64
	} from "@/common/base64.js"
	export default {
		data() {
			return {
				showAgreement: false,
				money: 0,
				redBagConfig: {
					btnText: "确认收款",
				},
				// Tab 数据
				tabs: [{
						name: "全部"
					},
					{
						name: "饮品"
					},
					{
						name: "休闲娱乐"
					},
					{
						name: "电影"
					},
					{
						name: "购物"
					},
				],

				// 当前选中的 Tab 下标
				selectedTab: 0,
				// 每个 Tab 对应的内容
				tabContent: [
					// Tab 1 内容
					[{
							image: "/static/icons/food1.png",
							text: "火锅"
						},
						{
							image: "/static/icons/food2.png",
							text: "烧烤"
						},
						{
							image: "/static/icons/food3.png",
							text: "中餐"
						},
						{
							image: "/static/icons/food4.png",
							text: "日料"
						},
						{
							image: "/static/icons/food5.png",
							text: "甜品"
						},
					],
					// Tab 2 内容
					[{
							image: "/static/icons/drink1.png",
							text: "奶茶"
						},
						{
							image: "/static/icons/drink2.png",
							text: "咖啡"
						},
						{
							image: "/static/icons/drink3.png",
							text: "果汁"
						},
						{
							image: "/static/icons/drink4.png",
							text: "气泡水"
						},
						{
							image: "/static/icons/drink5.png",
							text: "酒类"
						},
					],
					// Tab 3 内容
					[{
							image: "/static/icons/relax1.png",
							text: "KTV"
						},
						{
							image: "/static/icons/relax2.png",
							text: "密室"
						},
						{
							image: "/static/icons/relax3.png",
							text: "桌游"
						},
						{
							image: "/static/icons/relax4.png",
							text: "SPA"
						},
						{
							image: "/static/icons/relax5.png",
							text: "健身"
						},
					],
					// Tab 4 内容
					[{
							image: "/static/icons/movie1.png",
							text: "动作片"
						},
						{
							image: "/static/icons/movie2.png",
							text: "喜剧片"
						},
						{
							image: "/static/icons/movie3.png",
							text: "科幻片"
						},
						{
							image: "/static/icons/movie4.png",
							text: "爱情片"
						},
						{
							image: "/static/icons/movie5.png",
							text: "悬疑片"
						},
					],
					// Tab 5 内容
					[{
							image: "/static/icons/shopping1.png",
							text: "服饰"
						},
						{
							image: "/static/icons/shopping2.png",
							text: "数码"
						},
						{
							image: "/static/icons/shopping3.png",
							text: "家电"
						},
						{
							image: "/static/icons/shopping4.png",
							text: "家具"
						},
						{
							image: "/static/icons/shopping5.png",
							text: "百货"
						},
					],
				],

				// 左侧列数据
				leftCards: [{
						title: '美团',
						subtitle: '最高领66元',
						image: '/static/icons/pin.png'
					},
					{
						title: '饿了么',
						subtitle: '最高领66元',
						image: '/static/icons/pin.png'
					},
				],

				// 中间列数据
				middleCards: [{
						title: '京东',
						subtitle: '最高省50%',
						image: '/static/icons/pin.png'
					},
					{
						title: '拼多多',
						subtitle: '最高省50%',
						image: '/static/icons/pin.png'
					},
				],

				// 右侧列新增的数据
				rightCards: [{
						title: '加油优惠',
						subtitle: '直降2.7元/升',
						image: '/static/icons/tab-1.png'
					},
					{
						title: '电影特惠',
						subtitle: '低至6折',
						image: '/static/icons/tab-2.png'
					},
					{
						title: '出行优惠',
						subtitle: '打车立减10元',
						image: '/static/icons/tab-3.png'
					},
					{
						title: '快递省钱',
						subtitle: '低至5元寄件',
						image: '/static/icons/tab-4.png'
					},
				],
				// 商家列表
				shops: [{
						image: '/static/images/shop1.jpg',
						name: '福帅食品经营部',
						distance: 0.7,
						discount: 11,
					},
					{
						image: '/static/images/shop2.jpg',
						name: '华南超市',
						distance: 1.2,
						discount: 15,
					},
				],
				textList: [], // 要滚动的文字
				money: 0,
				redBagConfig: {
					btnText: "确认收款",
				},
				imageTypes: ['gif', 'png', 'png', 'png', 'gif', 'png'],
				taokeList: [{
						url: '/pages/1',
						buttonText: '点击抢购'
					},
					{
						url: '/pages/2',
						buttonText: '马上领取'
					},
					{
						url: '/pages/3',
						buttonText: '限时优惠'
					},
					{
						url: '/pages/4',
						buttonText: '火爆抢购'
					},
					{
						url: '/pages/5',
						buttonText: '最后机会'
					},
					{
						url: '/pages/6',
						buttonText: '超值福利'
					}

				],
				cateory: new Array(10).fill({}),
				sortType: 0,
				shops: [],
				page: 1,
				more: 'more',
				flag: false,
				locationRes: {
					longitude: 0,
					latitude: 0,
				},
				navList: [],
				goodsList: [],
				searchText: '',
				cityname: '',
				loading: false, // 加载状态
				cachedLocation: null, // 缓存定位信息
				sortParams: { // 排序参数
					sortBy: 'distance', // 默认按距离排序
					lat: 0,
					lng: 0
				}
			};
		},
		computed: {
			...mapState(['userLocation', 'userInfo', 'hasLogin']),
		},
		components: {
			CustomTabbar,
			MyHomeHeader,
			MyHomeSlide,
			MyHomeMenus,
			MyTaokeMenus,
			MyShops,
			AgreementPopup,
			uniLoadMore,
			// TaokeList
		},
		onUnload() {
			// 页面卸载时移除事件监听
			uni.$off('citynameChanged');
		},
		mounted() {
			console.log('taokeList数据:', JSON.stringify(this.taokeList))
		},
		onShow(e) {
			let that = this
			this.cityname = uni.getStorageSync('cityname')
			// alert(this.cityname);
			// 监听全局事件

			uni.$on('citynameChanged', (newCityname) => {
				this.shops = [];
				this.cityname = newCityname;
				// uni.clearStorage("lng")
				// uni.clearStorage("lat")
				this.getLoctionInfo(this.cityname)
				// alert('城市名称已更新：' + this.cityname);
				// this.getShops();
			});
			// var alert = uni.getStorageSync('alertInfo');
			// if(!alert){
			// 	this.showAgreement = true;
			// }
		
		},
		onLoad(params) {

			this.page = 1;

			if (params.cid) {
				this.$store.commit('setInviteCode', params.cid);
			}
			// console.log(this.$store.state.inviteCode);
			this.loadIndex();
			this.getCateory();
			this.getTaoke();
			this.getOrders();
			this.getShops();
			this.loadNav();
			this.getDistribute();
			this.getlocal();
			// #ifdef APP-PLUS
			if (!uni.getStorageSync('hasAgreed')) {
				this.showAgreement = true;
			}
			// #endif
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading'
				this.page++;
				this.getShops();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.flag = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.flag = false
			}
		},
		methods: {
		
		getlocal(){
			// #ifdef APP-PLUS
			location.getLocation((res) => {
			    if (res != 1){
					uni.showModal({
						content: res
					})
					return;
				} else{
					location.getReadStorage((ress) => {
					    if (ress != 1){
							uni.showModal({
								content: ress
							})
							return;
						} 
					    // xxx
					})
				}
			    // xxx
			})
			// #endif
			
		},
		

		handleAgree() {
			uni.setStorageSync('hasAgreed', true);
			this.showAgreement = false;
		},
		handleReject() {
			// #ifdef APP-PLUS
			plus.runtime.quit();
			// #endif
			// #ifdef H5
			uni.showToast({
				title: "请同意协议后使用",
				icon: "none"
			})
			// #endif
		},
		goLink(item) {
			if (!this.userInfo.id) {
				uni.showModal({
					title: "请先登录"
				});
				return;
			}
			if (item.url) {
				let url = item.url + '&custom_param=' + this.userInfo.id
				// #ifdef H5
				window.location.href = url
				// wind.href = url
				// #endif

				// #ifdef APP-PLUS
				plus.runtime.openURL(url, (err) => {
					if (err) {
						uni.showToast({
							title: "跳转失败，请检查链接",
							icon: "none"
						});
					}
				});
				// #endif

			} else {
				uni.showToast({
					title: "暂无链接",
					icon: 'none'
				})
			}
		},
		goBWC() {
			if (!this.userInfo.id) {
				uni.showModal({
					title: "请先登录"
				});
				return;
			}
			this.goNav('https://h5.yycjkb.cn/#/?merid=1&custom_param=' + this.userInfo.id); // 美团跳转链接
		},
		goDC() {
			if (!this.userInfo.id) {
				uni.showModal({
					title: "请先登录"
				});
				return;
			}
			this.goNav('https://h5.yycjkb.cn/#/?merid=1&custom_param=' + this.userInfo.id); // 美团跳转链接
		},
		goKD() {
			if (!this.userInfo.id) {
				uni.showModal({
					title: "请先登录"
				});
				return;
			}
			this.goNav('https://h5.yycjkb.cn/#/?merid=1&custom_param=' + this.userInfo.id); // 美团跳转链接
		},
		goLQ() {
			if (!this.userInfo.id) {
				uni.showModal({
					title: "请先登录"
				});
				return;
			}
			this.goNav('https://h5.yycjkb.cn/#/?merid=1&custom_param=' + this.userInfo.id); // 美团跳转链接
		},
		goMT() {
			if (!this.userInfo.id) {
				uni.showModal({
					title: "请先登录"
				});
				return;
			}
		},
		gotoLink(id) {
			user.getUrl({
				id: id
			}).then(res => {
				if (res.code == 1) {
					// #ifdef H5
					window.location.href = res.data.url
					// #endif

					// #ifdef APP-PLUS
					plus.runtime.openURL(res.data.url, (err) => {
						if (err) {
							uni.showToast({
								title: "跳转失败，请检查链接",
								icon: "none"
							});
						}
					});
					// #endif
				} else {
					this.toast(res.msg);
				}
			})
		},
		onSelectCity() {
			uni.navigateTo({
				url: '/pages/gjs-selectCity/gjs-selectCity'
			})
		},
		toscan() {
			uni.navigateTo({
				url: '/pages/home/scan/scan'
			})
		},
		// 点击确认红包按钮事件
		onConfirm() {},
		// 关闭红包时触发
		onClose() {},
		// 开启红包时触发
		onCover() {
			if (!this.userInfo.id) {
				uni.navigateTo({
					url: '/pages/my/login'
				})
				return;
			}
			// api/user_Vip/distribute

		},
		goSearch() {
			uni.navigateTo({
				url: `/pages/home/search?keyword=` + this.searchText.trim()
			})
		},
		selectTab(index) {
			this.selectedTab = index;
		},
		goMenu(cid) {
			uni.navigateTo({
				url: `/pages/home/list?cid=${cid}`
			})
		},
		goNav(item) {
			console.log(item)
			if(item.jtk_id == -1){
				var url = item.url + '&custom_param=' + this.userInfo.id
			}else if(item.jtk == 0){
				var url = item.url
			}else{
				var url = item.url
			}
			// #ifdef H5
			window.location.href = url
			// #endif

			// #ifdef APP-PLUS
			plus.runtime.openURL(url, (err) => {
				if (err) {
					uni.showToast({
						title: "跳转失败，请检查链接",
						icon: "none"
					});
				}
			});

			// #endif

			// uni.navigateTo({
			// 	url: `/pages/home/list?cid=${cid}`
			// })
		},
		async goMap(shops) {
				if (!shops.lat || !shops.lng) {
					return this.toast('商家暂未设置导航');
				}
				const [err, res] = await uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: parseFloat(shops.lat), //要去的纬度-地址
					longitude: parseFloat(shops.lng), //要去的经度-地址
					name: shops.short_name || shops.title,
					address: shops.address
				})
				if (err) {
					this.toast(err.errMsg)
				}
			},
			toShop(id) {
				uni.navigateTo({
					url: '/pages/home/detail?id=' + id
				})
			},
			// 点击确认红包按钮事件
			onConfirm() {},
			// 关闭红包时触发
			onClose() {},
			// 开启红包时触发
			onCover() {
				if (!this.userInfo.id) {
					uni.navigateTo({
						url: '/pages/my/login'
					})
					return;
				}
				// api/user_Vip/distribute

			},
			getDistribute() {
				let that = this

				user.distribute({
					user_id: that.userInfo.id
				}).then(res => {
					console.log(res.code)
					if (res.code === 1) {
						that.money = res.data.amount;
					} else {
						// that.toast(res.msg);
					}
				})
			},
			onSkip(id) {

				// #ifdef APP-PLUS
				plus.runtime.openURL('https://www.yycjkb.cn/dist/#/pages/product/goods?id=' + id)
				// #endif

				// #ifdef H5
				location.href = 'https://www.yycjkb.cn/dist/#/pages/product/goods?id=' + id
				// #endif


				// 
			},
			tonav(index) {

				let nav = '';
				if (index == 1) {
					nav = this.navList.nav1;
				}

				if (index == 2) {
					nav = this.navList.nav2;
				}

				if (index == 3) {
					nav = this.navList.nav3;
				}

				if (index == 4) {
					nav = this.navList.nav4;
				}

				uni.navigateTo({
					url: '/pages/web/index?url=' + Base64.encode(nav)
				})
			},
			async loadNav() {
					api.navList().then(res => {
						if (res.code === 1) {
							this.navList = res.data.navlist;
						} else {
							this.toast(res.msg);
						}
					});
					// https://www.yycjkb.cn/api/wanlshop/product/likes?page=1
					api.likes().then(res => {
						if (res.code === 1) {
							this.goodsList = res.data.data;
						} else {
							this.toast(res.msg);
						}
					})
				},
				async loadIndex() {
						api.index().then(res => {
							if (res.code === 1) {
								this.slides = res.data.list;
							} else {
								this.toast(res.msg);
							}
						});
					},
					async getCateory() {
							let res = await api.homecateList()
							if (res.code == 1) {
								this.cateory = res.data.list
							}
						},
						async getTaoke() {
								let res = await api.taokeList()
								if (res.code == 1) {
									this.taokeList = res.data.list
								}
							},
							getImagePath(index) {
								const imgNumber = index + 1
								const imgType = this.imageTypes[index] || 'png' // 默认使用png格式
								return `/static/${imgNumber}.${imgType}`
							},
							async getOrders() {
									let res = await api.orderList()
									if (res.code == 1) {
										this.textList = res.data.list.map(item => item.txt);
									}
								},
								async getShops(type) {
										var that = this;
										if (uni.getStorageSync('lng') && uni.getStorageInfoSync('lat')) {
											this.getShop();
											return;
										}
										await uni.getLocation({
											type: 'gcj02',
											geocode: true,
											success(result) {
												that.locationRes.latitude = result.latitude // 将纬度存起来
												that.locationRes.longitude = result.longitude // 将经度存起来
												that.handleReverseGeocode(result.latitude, result.longitude)
												that.getShop();

											},
											fail: error => {
												console.log("获取定位失败了", error)
												api.shopList({
													page: that.page,
													sortType: that.sortType,
													lng: 0,
													lat: 0
												}).then(res => {
													if (res.code == 1) {
														if (res.data.list.length <= 0) {
															that.more = 'noMore';
														} else {
															that.more = 'more';
														}
														that.shops = that.shops.concat(res.data
															.list)
													}
												})
											}
										})
									},
									async handleReverseGeocode(latitude, longitude) {
											var that = this;
											uni.request({
												url: 'https://restapi.amap.com/v3/geocode/regeo?key=73a8a77993e1e10f17f077c110dca45b&location=' +
													longitude + ',' + latitude,
												method: "GET",
												data: {},
												success(res) {
													console.log('ccc' + JSON.stringify(res.data))
													that.cityname = res.data.regeocode.addressComponent.city
												}
											});
										},
										async getLoctionInfo(city) {
												user.getLocation({
													city: city
												}).then(res => {
													console.log(res)
													if (res.code === 1) {
														this.locationRes.longitude = res.data.lng;
														this.locationRes.latitude = res.data.lat;
														this.cityname = res.data.name;
														uni.setStorageSync("lng", res.data.lng)
														uni.setStorageSync("lat", res.data.lat)
														uni.setStorageSync("cityname", res.data.name)
														this.getShop();
													}
												})
											},
											async getShop() {
													api.shopList({
														cityname: this.cityname,
														recommend: 1,
														page: this.page,
														sortType: this.sortType,
														lng: uni.getStorageSync('lng') != 0 ? uni.getStorageSync(
															'lng') : this.locationRes.longitude,
														lat: uni.getStorageSync('lat') != 0 ? uni.getStorageSync(
															'lat') : this.locationRes.latitude
													}).then(res => {

														if (res.code == 1) {
															if (res.data.list.length <= 0) {
																this.more = 'noMore';
															} else {
																this.more = 'more';
															}
															this.shops = this.shops.concat(res.data.list)
														}
													})
												},
												backTop() {
													uni.pageScrollTo({
														scrollTop: 0,
														duration: 200
													});
												},
												switchTab(sortType) {
													this.sortType = sortType;
													this.page = 1;
													this.getShops('change');
												}
	}
	};
</script>
<style lang="less" scoped>
	.free-sections {
		margin: 20rpx 0;


		.btn-containers {
			display: flex;
			justify-content: space-between;
			gap: 10rpx;
			/* 按钮间距 */
			margin-top: 20rpx;
			margin-bottom: -50rpx;

			.recharge-btns {
				flex: 1;
				width: 150rpx;
				height: 200rpx;
				/* 自定义高度 */
				border-radius: 18rpx;
				overflow: hidden;

				&:active {
					transform: scale(0.98);
				}

				.gif-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.free-section {
		margin: 20rpx 0;


		.btn-container {
			display: flex;
			justify-content: space-between;
			gap: 35rpx;
			/* 按钮间距 */

			.recharge-btn {
				flex: 1;
				height: 150rpx;
				/* 自定义高度 */
				border-radius: 18rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease;

				&:active {
					transform: scale(0.98);
				}

				.gif-img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.scroll-box {
		flex: 1;
		overflow: hidden;
		position: relative;
		border-radius: 15px;
		color: #d2d0d0;
		height: 20px;
		/* 新增约束 */
		max-width: 100%;
		/* 关键：防止超出父容器 */
		min-width: 50px;
		/* 按需设置最小宽度 */
	}

	.scroll-container {
		position: relative;
		width: max-content;
		min-width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.scroll-wrapper {
		display: flex;
		flex-direction: column;
		/* 子项垂直排列 */
		animation: scroll-up 15s linear infinite;
		/* 无缝滚动动画 */
	}

	.scroll-item {
		padding: 5px;
		color: #4e4e4e;
		font-size: 22rpx;
		font-family: sans-serif;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	@keyframes scroll-up {
		0% {
			transform: translateY(0);
			/* 从初始位置开始 */
		}

		100% {
			transform: translateY(-100%);
			/* 滚动一整组内容 */
		}
	}


	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.titleCommon {
		display: flex;
		align-items: center;
		padding: 0 10rpx;

		.splite {
			padding: 0 10rpx;
			color: #000000;
		}

		.title-data {
			color: #3d3d3d;
			font-size: 22rpx;
			font-family: sans-serif;
			display: inline-block;
			white-space: nowrap;
			font-weight: 300;

			text {
				display: inline;
				color: rgb(241, 53, 37);
				font-size: 22rpx;
				margin-left: 2rpx;
			}
		}
	}

	.container {
		padding-bottom: 178rpx;
		width: 95%;
		margin: auto;
		position: relative;

		.top-section {
			.top-title {
				padding-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: start;
				width: 100%;
				position: relative;

				.city-selector {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					cursor: pointer;

					.arrow-icon {
						width: 45rpx;
						height: 45rpx;
						margin: 0 1rpx;
						filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(101%) contrast(101%);
					}

					.arrow-icon1 {
						width: 26rpx;
						height: 16rpx;
						margin: 0 10rpx;
						vertical-align: middle;
						margin-top: 10rpx;
						filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(101%) contrast(101%);
					}

					.city-name {
						font-size: 28rpx;
						color: #000;
					}

					.page-title {
						font-size: 50rpx;
						padding-right: 10rpx;
						font-weight: 600;
						font-family: 'HuXiaoBoNanShenTi-2', sans-serif;
						color: #333;
						line-height: 1.5;
						text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
					}
				}
			}

			.search-index {
				background-color: #fff;
				height: 72rpx;
				width: 100%;
				border-radius: 100rpx;

				.search-center {
					margin: 25rpx;
					position: relative;
					display: flex;
					align-items: center;
					height: 100%;

					.search-icon {
						width: 47rpx;
						height: 47rpx;
					}

					.search-input {
						padding-left: 10rpx;
						font-size: 28rpx;
						width: 70%;
					}

					.search-btn {
						background-color: rgb(250, 158, 73);
						color: #fff;
						padding: 12rpx 36rpx;
						border-radius: 40rpx;
						font-size: 26rpx;
						margin-left: auto;
						position: absolute;
						right: -2%;
					}
				}
			}
		}

		.tab-content {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			padding-top: 20rpx;

			.tab-item {
				font-size: 35rpx;
				position: relative;
				cursor: pointer;

				&::after {
					content: '';
					position: absolute;
					bottom: -5rpx;
					left: 0;
					width: 100%;
					height: 2rpx;
					background-color: #000;
					transform: scaleX(0);
					transform-origin: center;
					transition: transform 0.3s ease;
				}
			}

			.active-tab {
				font-weight: bold;

				&::after {
					bottom: -13rpx;
					height: 8rpx;
					border-radius: 15rpx;
					transform: scaleX(1);
					background-color: #FF4D4F;
				}
			}
		}

		.grid-container {
			margin: 25rpx 0;
			border-radius: 26rpx;
			width: 100%;
			height: 177rpx;
			background-color: #fff;
			box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.grid-item {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;
				box-shadow: rgba(249, 196, 151, 1.0) 0px 0px 0px 0px;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.grid-text {
					padding: 2rpx 0;
					font-size: 20rpx;
					color: #2e2e2e;
					font-family: sans-serif;
					font-weight: 350;
				}
			}
		}

		.original-content {
			flex: 1;
			/* 占据剩余空间 */
		}

		.new-parent-container {
			width: 100%;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30rpx;
			/* 增大间距 */
		}

		.life-grid-item {
			background: #fff;
			border-radius: 16rpx;
			/* 缩小圆角更精致 */
			// box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); /* 更柔和的阴影 */
			padding: 10rpx 5rpx;
			/* 内边距微调 */
			text-align: center;
			display: flex;
			border-radius: 20rpx;
			flex-direction: column;
			gap: 10rpx;
			/* 子元素间距 */
			transition: transform 0.2s ease;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;
		}

		.grid-image {
			width: 100%;
			height: 100%;
			border-radius: 100rpx;
			transform: scale(2);
			/* 放大1.2倍 */
			transform-origin: center;
			/* 设置缩放中心点 */
			padding-top: 40rpx;
		}

		.button-container {
			margin-top: 20rpx;
			bottom: 20rpx;
			left: 0;
			right: 0;
			z-index: 3;
			/* 确保在图片上方 */
			display: flex;
			justify-content: center;
		}

		.custom-button {
			/* 基础样式 */
			background: #ffe71c !important;
			border: 2rpx solid rgba(255, 255, 255, 0.3) !important;
			color: #000000 !important;
			padding: 4rpx 20rpx !important;
			min-width: 180rpx;
			border-radius: 40rpx;
			font-size: 28rpx !important;
			font-weight: 600;
			text-align: center;
			white-space: nowrap;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);

			letter-spacing: 1rpx;
			transition: all 0.3s ease;
			transform: translateY(-10rpx);
		}

		.custom-button:active {
			transform: scale(0.95);
			opacity: 0.9;
		}

		.life-grid-item:hover {
			transform: translateY(-2rpx);
		}

		.life-grid-item .icon {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 10rpx;
		}

		.life-grid-item .title {
			font-size: 24rpx;
			color: #FF4D4F;
			/* 红色标题 */
			font-weight: 600;
			margin-bottom: 8rpx;
		}

		.life-grid-item .promo {
			font-size: 20rpx;
			color: #FF9900;
			/* 橙色促销 */
			margin-bottom: 12rpx;
		}

		.life-grid-item .button {
			background: linear-gradient(90deg, #FF4D4F 0%, #FF9900 100%);
			color: white;
			padding: 8rpx 20rpx;
			border-radius: 24rpx;
			font-size: 20rpx;
			text-decoration: none;
			min-width: 120rpx;
			white-space: nowrap;
			text-align: center;
		}

		.life-grid-item image {
			width: 200rpx;
			height: 170rpx;
			margin-bottom: 10rpx;
			object-fit: cover;
			border-radius: 8rpx;
			/* 图片圆角 */
		}

		.life-grid-item text {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
		}

		.life-container {
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			border-radius: 26rpx;
			box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
			padding: 20rpx;
			color: rgba(0, 0, 0, 0.85);
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue';
			font-weight: 1000;
			text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);

			.life-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: normal !important;

				.title-name {
					display: inline-block;
					font-weight: 900;
					font-size: 36rpx;
					font-family: 'HuXiaoBoNanShenTi-YanHua', sans-serif;
					-webkit-background-clip: text;
					background-clip: text;
					color: #2e2e2e;


					white-space: nowrap;
				}

				.life-grid-container {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(150rpx, 1fr));
					/* 关键自适应属性 */
					gap: 20rpx;
					/* 间距 */
					justify-content: center;
					/* 水平居中 */
					padding: 20rpx;
					max-width: 750rpx;
					/* 限制最大宽度 */
					margin: 0 auto;
					/* 容器居中 */
				}

				.order-user {
					position: relative;
					max-width: 400rpx;
					min-width: 120rpx;
					padding: 8rpx 20rpx;
					background-color: #f4f2f7;
					border-radius: 40rpx;
					color: #7b7b7b;
					font-size: 24rpx;
				}
			}

			.life-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 14rpx;
				padding: 16rpx 0;

				.life-grid-item {
					width: 100%;
					/* 宽度自适应 */
					height: 177rpx;
					background-color: #fff;
					border-radius: 26rpx;
					position: relative;
					overflow: hidden;
					box-shadow: ;
					transition: transform 0.3s ease;

					/* 内部元素居中 */
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					&:active {
						transform: scale(0.98);
					}

					image {
						width: 120rpx;
						height: 160rpx;
						transform: perspective(500px) rotateY(3deg);
					}

					.grid-item-back-image {
						position: absolute;
						width: 100%;
						height: 100%;
						object-fit: cover;
						z-index: 1;
					}

					.content-wrapper {
						position: relative;
						z-index: 2;
						width: 100%;
						padding: 20rpx;
						text-align: center;
					}
				}

				/* 响应式适配 */
				@media (max-width: 600rpx) {
					.life-grid-container {
						grid-template-columns: repeat(2, 1fr);
						/* 小屏两列 */
						gap: 15rpx;
						padding: 15rpx;
					}

					.life-grid-item {
						height: 150rpx;
					}
				}

				@media (min-width: 1200rpx) {
					.life-grid-container {
						grid-template-columns: repeat(4, 1fr);
						/* 大屏四列 */
					}

					.item-left {
						margin-right: 10rpx;
						z-index: 16;

						.left-icon {
							width: 50rpx;
							height: 44rpx;
							border-radius: 100%;
							margin-right: 10rpx;
						}

						.left-title {
							background: linear-gradient(135deg, #ff6b6b 0%, #ff9f43 100%);
							-webkit-background-clip: text;
							background-clip: text;
							color: transparent;
						}

						.left-data-money {
							margin-top: 10rpx;
							background: linear-gradient(135deg, #ff6b6b 0%, #ff9f43 100%);
							-webkit-background-clip: text;
							background-clip: text;
							color: transparent;
						}
					}

					.item-right {
						margin-left: -5rpx;

						image {
							width: 130rpx;
							height: 120rpx;
							transform: perspective(500px) rotateY(3deg);
						}
					}
				}
			}

			.life-radio {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 0;

				.radio-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.radio {
						width: 132rpx;
						height: 132rpx;
						background-color: #fff;
						border-radius: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1),
							0px 2px 8px rgba(0, 0, 0, 0.1);

						image {
							width: 91rpx;
							height: 91rpx;
							border-radius: 100%;
						}
					}

					.radio-text {
						padding-top: 10rpx;
						font-size: 10rpx;
						color: rgba(0, 0, 0, 0.85);
						font-family: sans-serif;
						font-weight: 400;
					}
				}
			}
		}

		.nearby-businesses {
			padding: 30rpx 0;
			background: transparent;

			.title-name {
				display: inline-block;
				font-weight: 900;
				font-size: 36rpx;
				font-family: 'HuXiaoBoNanShenTi-YanHua', sans-serif;
				-webkit-background-clip: text;
				background-clip: text;
				color: #2e2e2e;
				white-space: nowrap;

			}

			.splite {
				padding: 0 10rpx;
				color: #000000;
			}

			.title-data {
				color: #3d3d3d;
				font-size: 22rpx;
				font-family: sans-serif;
				display: inline-block;
				white-space: nowrap;
				font-weight: 350;

				text {
					display: inline;
					color: rgb(241, 53, 37);
					font-size: 22rpx;
					margin-left: 2rpx;
				}
			}

			.businesses-item {
				width: 100%;
				height: 204rpx;
				background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
				position: relative;
				overflow: hidden;
				border-radius: 26rpx;
				margin-top: 20rpx;
				padding: 20rpx;
				display: flex;
				transition: transform 0.3s ease, box-shadow 0.3s ease;

				.item-left-image {
					width: 169rpx;
					height: 169rpx;
					border-radius: 26rpx;
				}

				.item-center-text {
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-phone {
						display: flex;
						align-items: center;
						color: #7b7b7b;
						padding-top: 14rpx;

						image {
							width: 23rpx;
							height: 23rpx;
						}
					}

					.item-buy {
						display: flex;
						align-items: center;

						.money-box {
							width: 44rpx;
							height: 44rpx;
							background-color: #ff9b45;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom-left-radius: 6rpx;
							border-top-left-radius: 6rpx;

							image {
								width: 29rpx;
								height: 29rpx;
							}
						}

						.money-data {
							height: 44rpx;
							padding: 0 20rpx;
							min-width: 80rpx;
							max-width: 200rpx;
							display: inline-block;
							text-align: center;
							border-radius: 6rpx;
							color: #ff9b45;
							background-color: rgba(255, 155, 69, 0.2);
							box-sizing: border-box;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							line-height: 44rpx;
						}
					}
				}


				.item-right-icon {
					margin-left: auto;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.icon-red {
						width: 40rpx;
						height: 90rpx;
						margin-left: auto;
						margin-top: -10rpx;
					}

					.address {
						display: flex;
						align-items: center;
						color: #8a8a8a;

						image {
							height: 44rpx;
							width: 44rpx;

						}
					}
				}
			}
		}
	}
</style>